<template>
  <div class="container">
    <h1>新建 Incident</h1>
    <form @submit.prevent="showConfirmationDialog">
      <div class="form-grid">
        <div class="form-group">
          <label for="opened">Opened:</label>
          <input type="datetime-local" v-model="incident.Opened" required class="rounded-input" />
        </div>
        <div class="form-group">
          <label for="resolved">Resolved:</label>
          <input type="datetime-local" v-model="incident.Resolved" class="rounded-input" />
        </div>
        <div class="form-group">
          <label for="opened_by">Opened By:</label>
          <input type="text" v-model="incident.Opened_by" required class="rounded-input" />
        </div>
        <div class="form-group">
          <label for="priority">Priority:</label>
          <select v-model="incident.Priority" required class="rounded-select">
            <option value="" disabled>Select Priority</option>
            <option value="1 - Critical">1 - Critical</option>
            <option value="2 - High">2 - High</option>
            <option value="3 - Moderate">3 - Moderate</option>
            <option value="4 - Low">4 - Low</option>
          </select>
        </div>
        <div class="form-group">
          <label for="project">Project:</label>
          <input type="text" v-model="incident.Project" class="rounded-input" />
        </div>
        <div class="form-group">
          <label for="short_description">Short Description:</label>
          <input type="text" v-model="incident.Short_description" required class="rounded-input" />
        </div>
        <div class="form-group">
          <label for="description">Description:</label>
          <textarea v-model="incident.Description" class="rounded-textarea"></textarea>
        </div>
        <div class="form-group">
          <label for="assigned_to">Assigned To:</label>
          <input type="text" v-model="incident.Assigned_to" class="rounded-input" />
        </div>
        <div class="form-group">
          <label for="assignment_group">Assignment Group:</label>
          <select v-model="incident.Assignment_group" required class="rounded-select">
            <option value="" disabled>Select Assignment Group</option>
            <option value="Cloud-Administrators-L1">Cloud-Administrators-L1</option>
            <option value="Cloud-Administrators-L2">Cloud-Administrators-L2</option>
          </select>
        </div>
        <div class="form-group">
          <label for="incident_state">Incident State:</label>
          <input type="text" v-model="incident.Incident_state" readonly class="rounded-input" />
        </div>
      </div>
      <button type="submit" class="blue-button">创建 Incident</button>
    </form>

    <!-- 确认对话框 -->
    <ConfirmationDialog2
      v-if="showDialog"
      @confirm="createIncident"
      @cancel="showDialog = false"
    />
  </div>
</template>


  
<script>
import axios from 'axios';
import ConfirmationDialog2 from '../components/ConfirmationDialog2.vue'; // 导入对话框组件

export default {
  components: {
    ConfirmationDialog2 // 注册对话框组件
  },
  data() {
    return {
      incident: {
        Opened: '',
        Resolved: '',
        Opened_by: '',
        Priority: '',
        Project: '',
        Short_description: '',
        Description: '',
        Assigned_to: '',
        Assignment_group: '',
        Incident_state: 'Work In Progress' // 默认值
      },
      showDialog: false // 控制对话框显示的状态
    };
  },
  mounted() {
    // 设置当前系统时间为 Opened 字段，并转换为东八区时间
    const now = new Date();
    now.setHours(now.getHours() + 8); // 加上8小时，转换为东八区时间
    const formattedDate = now.toISOString().slice(0, 16); // 格式化为 'YYYY-MM-DDTHH:MM'
    this.incident.Opened = formattedDate;
  },
  methods: {
    showConfirmationDialog() {
      this.showDialog = true; // 显示确认对话框
    },
    async createIncident() {
      try {
        // 在提交前，将东八区时间转换为 UTC 时间
        const utcOpened = this.convertToUTC(this.incident.Opened);
        const incidentData = {
          ...this.incident,
          Opened: utcOpened
        };

        const response = await axios.post('http://localhost:3000/api/incidents', incidentData);
        alert('Incident 创建成功: ' + response.data.message);
        this.resetForm();
        this.showDialog = false; // 关闭对话框
      } catch (error) {
        console.error('创建 Incident 失败:', error);
        alert('创建 Incident 失败: ' + (error.response?.data?.message || error.message));
      }
    },
    resetForm() {
      this.incident = {
        Opened: '',
        Resolved: '',
        Opened_by: '',
        Priority: '',
        Project: '',
        Short_description: '',
        Description: '',
        Assigned_to: '',
        Assignment_group: '',
        Incident_state: 'Work In Progress' // 默认值
      };
    },
    convertToUTC(dateString) {
      const date = new Date(dateString);
      date.setHours(date.getHours() + 8); // 加8小时
      return date.toISOString().slice(0, 16);
    }
  }
};
</script>
  
  <style scoped>
  .container {
    background-color: white; /* 白色背景 */
    border-radius: 10px; /* 圆角 */
    padding: 20px; /* 内边距 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 添加阴影 */
  }





  .form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 两列布局 */
    gap: 16px; /* 列间距 */
  }
  
  .form-group {
    display: flex;
    flex-direction: column;
  }
  
  .rounded-input,
  .rounded-select,
  .rounded-textarea {
    border-radius: 8px;
    border: 1px solid #ccc;
    padding: 8px;
  }
  
  .rounded-input:focus,
  .rounded-select:focus,
  .rounded-textarea:focus {
    outline: none;
    border-color: #007bff;
  }
  
  .blue-button {
    margin-top: 25px;
    height: 30px;
    width: 150px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 3px 3px;
    cursor: pointer;
    font-size: 15px;
  }
  
  .blue-button:hover {
    background-color: #0056b3;
  }
  </style>
